<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<style>
	*{margin:0;
	padding: 0;
	list-style-type: none;
	}
	
	
	.conten1{
		width:300px;
		height:200px;
		border:1px solid black;
		text-align: contern;
		margin: 50px auto;
	}
	
	.conten2{
		width:300px;
		height:200px;
		border:1px solid black;
		margin: 50px auto;
	}
	
	li{
            width:200px;
			height: 50px;
            line-height: 50px;
            background-color: #eee;
            text-align: center;
            margin:10px auto;
	}
	</style>
	</head>
	<body>
<div class=conten1>
	<ul class="ul1">
		<li>梦想点亮世界</li>
		<li>科技引领未来</li>
		<li>读书点亮人生</li>
	</ul>	
</div>
	
	<div class="conten2">
		
	</div>
	</body>
<script>
function fn(ele){
	return document.querySelectorAll(ele);
}

for(var i=0;i<fn('li').length;i++){
	fn('li')[i].draggable=true;	
	fn('li')[i].onOff=false;
	fn('li')[i].ondragstart=function(){
		this.onOff=true;	
	}
	fn('li')[i].ondragend=function(){
		this.onOff=false;
	}
}

fn('.conten1')[0].addEventListener('dragenter',function(){},false);
fn('.conten2')[0].addEventListener('dragenter',function(){},false);

fn('.conten1')[0].addEventListener('dragover',function(e){
	e.preventDefault()
},false);
fn('.conten2')[0].addEventListener('dragover',function(e){
	e.preventDefault()
},false);

fn('.conten1')[0].addEventListener('dragleave',function(){},false);	
fn('.conten2')[0].addEventListener('dragleave',function(){},false);	

fn('.conten1')[0].addEventListener('drop',function(e){		
var index;
for(var i=0;i<fn('li').length;i++){
	if (fn('li')[i].onOff==true){
		index=i;
	}
}
this.appendChild(fn('li')[index]);
},false);

fn('.conten2')[0].addEventListener('drop',function(e){		
var index;
for(var i=0;i<fn('li').length;i++){
	if (fn('li')[i].onOff==true){
		index=i;
	}
}
this.appendChild(fn('li')[index]);
},false);
</script>
</html>
